---
title: "Apple calendar connect"
---

The Apple calendar connect button is used to effortlessly syncs a user's apple calendar. This allows users to create, view and edit events, with options available for type and time all from the platform.

Below code snippet can be used to render the Apple calendar connect button

```js
import { Connect } from "@calcom/atoms";

export default function ConnectCalendar() {
  return (
    <>
      <Connect.AppleCalendar />
    </>
  );
}
```

For a demonstration of the Apple calendar connect integration, please refer to the video below.

<p></p>

    <iframe
      style={{ width: "100%", maxWidth: "560px" }}
      height="315"
      src="https://www.loom.com/embed/0db65d94754443ae91fed28f9bc10509?sid=8389e585-ab9c-457f-944f-82ec7e595f13"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen="true"
    ></iframe>

<p></p>

The apple calendar atom works a bit differently than outlook and google calendar. We don’t get redirected to an OAuth consent page, instead a modal appears which prompts us to create an app specific password to use with Cal.com

Similar to Outlook and Google calendar, the Apple calendar connect supports integration for both single and multiple users. The above video demonstration showcases the integration for a single user. To enable integration for multiple users, simply pass the prop `isMultiCalendar` as `true`.

Below code snippet can be used to render the Apple calendar connect button for multiple users

```js
import { Connect } from "@calcom/atoms";

export default function ConnectCalendar() {
  return (
    <>
      <Connect.AppleCalendar isMultiCalendar={true} />
    </>
  );
}
```

For a demonstration of the Apple calendar connect integration for multiple users, please refer to the video below.

<p></p>

    <iframe
      height="315"
      style={{ width: "100%", maxWidth: "560px" }}
      src="https://www.loom.com/embed/5844146fbcf840f99e35f9620a34186d"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen="true"
    ></iframe>

<p></p>

We offer all kinds of customizations to the Outlook calendar connect via props. Below is a list of props that can be passed to the Google calendar connect.

<p></p>

| Name                  | Required | Description                                                              |
| :-------------------- | :------- | :----------------------------------------------------------------------- |
| className             | No       | To pass in custom classnames from outside for styling the atom           |
| label                 | No       | The label for the connect button                                         |
| alreadyConnectedLabel | No       | Label to display when atom is in already connected state                 |
| loadingLabel          | No       | Label to display when atom is in loading state                           |
| onCheckError          | No       | A callback function to handle errors when checking the connection status |
| initialData           | No       | Initial data to be passed                                                |
| isMultiCalendar       | No       | Specifies if the button supports integration for multiple users          |
| tooltip               | No       | In case user wants to pass external tooltip component                    |
| tooltipSide           | No       | Specifies what direction the tooltip appears                             |
| isClickable           | No       | Boolean to disable button or not                                         |
| onSuccess             | No       | A callback function to handle success when checking the connection status|

<Note>
  If you try to put your Apple Id password in the password field, it will throw an error. It only accepts an
  app specific password generated from https://appleid.apple.com/account/manage.
</Note>
